<template>
    <div class="newsinfo">
        <h3 class="title">{{newsInfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{newsInfo.pubDate}}</span>
            <span>来源: {{newsInfo.source}}</span>
        </p>
        <hr>
        <div v-html="newsInfo.html" class="content"> </div>
        <comment-box :id="id"></comment-box>
    </div>
</template>
<script>
import axios from "axios"
import comment from "../subcomponents/coment.vue"
export default {
    data(){
        return {
            id:this.$route.params.id,
            newsInfo:{},
        }
    },
    created(){
        this.getNewsById(this.id)
    },
    methods:{
        getNewsById(id){
            axios.get("http://route.showapi.com/109-35", {
                    params: {
                    showapi_appid: "69119",
                    showapi_sign: "2f25c88c51774595b0b8ea8b17852294",
                    id:id,
                    needContent:'1',
                    needHtml:'1',
                    maxResult:'1'
                    }
                })
                    .then(res=>{
                        this.newsInfo = res.data.showapi_res_body.pagebean.contentlist[0]
                        
                    })
                    .catch(err=>{
                        console.log(err)
                    })
        }
    },
    components:{
        'comment-box': comment
    }
}
</script>
<style lang="scss" scoped>
    .newsinfo{
        padding: 15px;
        overflow-x: hidden;
        margin-bottom: 50px;
        .title{
            padding: 10px ;
            line-height: 22px;
            font-size: 18px;
            color:red;
            text-align: center;
        }
    .subtitle{
            font-size: 13px;
            color:royalblue;
            display: flex;
            justify-content: space-between;
            padding: 5px;
        }
        .content{
            color: grey;
        }
    }
</style>
